

<template>
  <!-- 导航 -->
  <el-row style="margin: 10px;background-color: ghostwhite;padding: 15px">
    <el-col :span="24">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>生产管理</el-breadcrumb-item>
        <el-breadcrumb-item>工序设置</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>
  <!-- 搜索栏-->
  <el-row style="margin: 10px;padding: 15px">
    <el-col :span="24">
      <el-form :model="processQuery" inline>
        <el-form-item label="工序编码">
          <el-input v-model="processQuery.processId">
          </el-input>
        </el-form-item>
        <el-form-item label="工序名称">
          <el-input v-model="processQuery.processName"/>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-select style="width: 100px" v-model="processQuery.processStatus">
            <el-option :value="0" label="全部"/>
            <el-option :value="1" label="是"/>
            <el-option :value="2" label="否"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="loadProcesses" type="primary"><el-icon><Search /></el-icon>搜索</el-button>
          <el-button @click="clearAll"><el-icon><Refresh /></el-icon>清空</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <!-- 工具栏 -->
  <el-row style="margin: 0px 10px;padding: 0px 10px">
    <el-col :span="24">
        <el-button @click="addProcess" type="primary" plain><el-icon><Plus /></el-icon>新增</el-button>
        <el-button @click="" type="success" plain><el-icon><EditPen /></el-icon>修改</el-button>
      <el-button @click="reDelete" type="danger" plain><el-icon><Delete /></el-icon>删除</el-button>
      <el-button @click="" type="warning" plain><el-icon><Download /></el-icon>导出</el-button>
    </el-col>
  </el-row>
  <!-- 数据列表 -->
  <el-row style="margin: 10px 10px;padding:0px 15px;">
    <el-col :span="24">
      <el-table :data="processes" border stripe ref="processesTable">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="processId" label="工序编码">
          <template #default="scope">
            <el-link type="success" @click="showDetails(scope.row)">{{scope.row.processId}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="processName" label="工序名称"/>
        <el-table-column prop="processStatus" label="是否启用">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.processStatus == 1">是</el-tag>
            <el-tag type="danger" v-if="scope.row.processStatus == 2">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="processNotes" label="备注"/>

          <el-table-column label="操作" width="200">
            <template #default="scope">
              <el-link @click="toEditProcess(scope.row)" style="margin: 0px 5px" type="primary"><el-icon><EditPen /></el-icon>编辑</el-link>
              <el-popconfirm width="200"
                             confirm-button-text="必须删"
                             cancel-button-text="点错了"
                             @confirm="deleteProcessById(scope.row.processId)"
                             title="您确定要删除这条数据吗？">
                <template  #reference>
                  <el-link style="margin: 0px 5px" type="primary">
                    <el-icon><Delete /></el-icon>删除
                  </el-link>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <el-row style="margin: 0px 10px;padding: 0px 15px">
    <el-col :span="24">
      <el-pagination @change="changePage" background layout="prev,pager,next" :total="total"/>
    </el-col>
  </el-row>

  <!--  新增-->
  <el-dialog v-model="processAddWinDialogVisible" title="新增生产工序" width="70%">
<!--    <template #default>-->
      <el-form :model="newProcess" label-width="auto">
        <el-row>
          <el-col :span="8">
            <el-form-item label="工序编码">
              <el-input v-model="newProcess.processId" style="width: 150px"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工序名称">
              <el-input v-model="newProcess.processName"style="width: 150px"/>
            </el-form-item>
          </el-col>
        </el-row>
          <el-form-item label="是否启用">
              <el-radio-group style="width: 100px" v-model="newProcess.processStatus">
                <el-radio label="是" :value="1"/>
                <el-radio label="否" :value="2"/>
              </el-radio-group>
          </el-form-item>
        <el-form-item label="工序说明">
          <el-input v-model="newProcess.processDescribe" type="textarea"/>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="newProcess.projectDesc" type="textarea"/>
        </el-form-item>
      </el-form>
<!--    </template>-->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="clearNewProcess()">清空</el-button>
        <el-button @click="cancleAdd()">取消</el-button>
        <el-button type="primary" @click="addProcessSubmit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!--  编辑-->
  <el-dialog v-model="processEditWinDialogVisible" title="修改生产工序" width="70%">
    <!--    <template #default>-->
    <el-form :model="editProcess" label-width="auto">
      <el-row>
        <el-col :span="12">
          <el-form-item label="工序编码">
            <el-input v-model="editProcess.processId" style="width: 150px" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工序名称">
            <el-input v-model="editProcess.processName"style="width: 150px"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="是否启用">
        <el-radio-group style="width: 100px" v-model="editProcess.processStatus">
          <el-radio label="是" :value="1"/>
          <el-radio label="否" :value="2"/>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="工序说明">
        <el-input v-model="editProcess.processDescribe" type="textarea"/>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="editProcess.processNotes" type="textarea"/>
      </el-form-item>
    </el-form>
    <div style="width: 100%;text-align: center">操作步骤</div>
    <!-- 工具栏 -->
    <el-row style="margin: 0px 10px;padding: 0px 10px">
      <el-col :span="24">
        <el-button @click="addStep" type="primary" plain><el-icon><Plus /></el-icon>新增</el-button>
        <el-button @click="" type="success" plain><el-icon><EditPen /></el-icon>修改</el-button>
        <el-button @click="reDeleteStep" type="danger" plain><el-icon><Delete /></el-icon>删除</el-button>
        <el-button @click="exportStep" type="warning" plain><el-icon><Download /></el-icon>导出</el-button>
      </el-col>
    </el-row>
<!--    步骤列表-->
    <el-row style="margin: 10px 10px;padding:0px 15px;">
      <el-col :span="24">
        <el-table :data="processStep" border stripe ref="processStepTable">
          <el-table-column type="selection" width="55"/>
          <el-table-column prop="processStepId" label="顺序编号">
            <template #default="scope">
              <el-link type="success" @click="showStepDetail(scope.row)">{{scope.row.processStepId}}</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="stepDescription" label="步骤说明"/>
          <el-table-column prop="auxiliaryEquipment" label="辅助设备"/>
          <el-table-column prop="auxiliaryMaterials" label="辅助材料"/>
          <el-table-column prop="stepNote" label="备注"/>

          <el-table-column label="操作" width="330">
            <template #default="scope">
              <el-link @click="editStepDetail(scope.row)" style="margin: 0px 5px" type="primary"><el-icon><EditPen /></el-icon>编辑</el-link>
              <el-popconfirm width="200"
                             confirm-button-text="必须删"
                             cancel-button-text="点错了"
                             @confirm="deleteStepById(scope.row.processId,scope.row.processStepId)"
                             title="您确定要删除这条数据吗？">
                <template  #reference>
                  <el-link style="margin: 0px 5px" type="primary">
                    <el-icon><Delete /></el-icon>删除
                  </el-link>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row style="margin: 0px 10px;padding: 0px 15px">
      <el-col :span="24">
        <el-pagination @change="stepChangePage" background layout="prev,pager,next" :total="stepTotal"/>
      </el-col>
    </el-row>
    <!--    </template>-->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancleEdit()">取消</el-button>
        <el-button type="primary" @click="editProcessSubmit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!--  工序详情-->
  <el-dialog v-model="processDatailsWinDialogVisible" title="工序详情" width="70%">
    <!--    <template #default>-->
    <el-form :model="processDatails" label-width="auto">
      <el-row>
        <el-col :span="12">
          <el-form-item label="工序编码">
            <el-input v-model="processDatails.processId" style="width: 150px" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工序名称">
            <el-input v-model="processDatails.processName"style="width: 150px"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="是否启用">
        <el-radio-group style="width: 100px" v-model="processDatails.processStatus">
          <el-radio label="是" :value="1"/>
          <el-radio label="否" :value="2"/>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="工序说明">
        <el-input v-model="processDatails.processDescribe" type="textarea"/>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="processDatails.processNotes" type="textarea"/>
      </el-form-item>
    </el-form>
    <div style="width: 100%;text-align: center">操作步骤</div>
    <!--    步骤列表-->
    <el-row style="margin: 10px 10px;padding:0px 15px;">
      <el-col :span="24">
        <el-table :data="processStep" border stripe ref="processStepTable">
          <el-table-column type="selection" width="55"/>
          <el-table-column prop="processStepId" label="顺序编号">
            <template #default="scope">
              <el-link type="success" @click="">{{scope.row.processStepId}}</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="stepDescription" label="步骤说明"/>
          <el-table-column prop="auxiliaryEquipment" label="辅助设备"/>
          <el-table-column prop="auxiliaryMaterials" label="辅助材料"/>
          <el-table-column prop="stepNote" label="备注"/>
        </el-table>
      </el-col>
    </el-row>
    <el-row style="margin: 0px 10px;padding: 0px 15px">
      <el-col :span="24">
        <el-pagination @change="stepChangePage" background layout="prev,pager,next" :total="stepTotal"/>
      </el-col>
    </el-row>
  </el-dialog>
<!--新增步骤-->
  <el-dialog v-model="stepAddWinDialogVisible" title="新增工序步骤" width="70%">
    <!--    <template #default>-->
    <el-form :model="newStep" label-width="auto">
      <el-row>
        <el-col :span="8">
          <el-form-item label="顺序编号">
            <el-input-number  v-model="newStep.processStepId" style="width: 150px" :min="0"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="材料URL">
            <el-input v-model="newStep.materialUrl"style="width: 150px"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="辅助设备">
            <el-input v-model="newStep.auxiliaryEquipment" style="width: 150px"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="辅助材料">
            <el-input v-model="newStep.auxiliaryMaterials"style="width: 150px"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="步骤说明">
        <el-input v-model="newStep.stepDescription" type="textarea"/>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="newStep.stepNote" type="textarea"/>
      </el-form-item>
    </el-form>
    <!--    </template>-->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancleAdd()">取消</el-button>
        <el-button type="primary" @click="addStepSubmit">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
<!--编辑步骤-->
  <el-dialog v-model="stepEditWinDialogVisible" title="编辑工序步骤" width="70%">
    <!--    <template #default>-->
    <el-form :model="editStep" label-width="auto">
      <el-row>
        <el-col :span="8">
          <el-form-item label="顺序编号">
            <el-input type="number" v-model="editStep.processStepId" style="width: 150px"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="材料URL">
            <el-input v-model="editStep.materialUrl"style="width: 150px"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="辅助设备">
            <el-input v-model="editStep.auxiliaryEquipment" style="width: 150px"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="辅助材料">
            <el-input v-model="editStep.auxiliaryMaterials"style="width: 150px"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="步骤说明">
        <el-input v-model="editStep.stepDescription" type="textarea"/>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="editStep.stepNote" type="textarea"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancleEditStep">取消</el-button>
        <el-button type="primary" @click="editStepSubmit">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>

<!--  导出窗口-->
  <el-dialog v-model="stepDownloadWinDialogVisible" title="新建下载任务" width="40%">
    <!--    <template #default>-->
    <el-form :model="donwload" label-width="auto">
      <el-form-item label="文件名称">
        <el-input v-model="donwload.fileName"/>
      </el-form-item>
      <el-form-item label="下载地址">
        <el-input v-model="donwload.address" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancleLoad">取消</el-button>
        <el-button type="primary" @click="downloadStep">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>

<script setup>
import processRequest from "@/api/process.js";
import processStepRequest from "@/api/processSteps.js";
import {onMounted, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";

let processQuery = ref({});
let processes = ref([]);
let pageNum = ref(1);
let total = ref(0);
let newProcess = ref({});
newProcess.value.processStatus = 1;
let processAddWinDialogVisible = ref(false);
let processEditWinDialogVisible = ref(false);
let processDatailsWinDialogVisible = ref(false);
let stepAddWinDialogVisible = ref(false);
let stepEditWinDialogVisible = ref(false);
let stepDownloadWinDialogVisible = ref(false);
let processDatails = ref({});
let newStep = ref({});
let editProcess = ref({});
let processStep = ref([]);
let stepPageNum = ref(1);
let stepTotal = ref(0);
let beforeStepId = ref(null);
let stepDetail = ref({});
let editStep = ref({});
let donwload = ref({});
function exportStep(){
  stepDownloadWinDialogVisible.value = true;
  donwload.value.fileName = editProcess.value.processId + ".xlsx";
  donwload.value.address = "D:/";
  donwload.value.processId = editProcess.value.processId;
}
function cancleLoad(){
  stepDownloadWinDialogVisible.value = false;
  donwload.value = {};
}
function  downloadStep(){
  if(donwload.value.fileName == null){
    alert("请输入文件名！")
    return;
  }
  processStepRequest.download(donwload.value,res=>{
    console.log(res);
    if(res.code == 200){
      ElMessage({
        type:"success",
        message:"保存成功"
      });
      stepDownloadWinDialogVisible.value = false;
    }else {
      ElMessage({
        type:"warning",
        message:"保存失败（路径错误）"
      });
    }
  })
}
function addStep(){
  stepAddWinDialogVisible.value = true;
  console.log(editProcess.value.processId)
  newStep.value.processId = editProcess.value.processId;
}
function editStepDetail(steps){
  console.log("-----------")
  console.log(steps);
  beforeStepId.value = steps.processStepId;
  processStepRequest.showByOperationStepId(steps.operationStepId,res=>{
    console.log(res.data)
    editStep.value = res.data;
  })
  // editStep.value = steps;
  stepDetail.value = steps;
  console.log(editStep.value);
  stepEditWinDialogVisible.value = true;
}
let processStepTable = ref(null);
function reDeleteStep(){
  let selectedRows = processStepTable.value.getSelectionRows();
  if(selectedRows.length == 0){
    ElMessage({
      type:"warning",
      message:"你没有选中任何数据"
    });
    return;
  }
  ElMessageBox.confirm(
      '您确定要将选中的项目删除吗？',
      '提示',
      {
        confirmButtonText:'是的',
        cancelButtonText:'点错了',
        type:'warning',
      }
  ).then(()=>{
    let stepIds = [];
    selectedRows.forEach(row=>{
      stepIds.push(row.processStepId);
    });
    processStepRequest.reDelete(stepIds,selectedRows[0].processId,res=>{
      console.log(res);
      if(res.code == 200){
        loadProcesses();
        ElMessage({
          type:"success",
          message:"删除成功"
        });
        loadSteps(selectedRows[0].processId);
      }
    })
  }).catch(()=>{})
}
function deleteStepById(processId,processStepId){
  processStepRequest.deleteStep(processId,processStepId,res=>{
    console.log(res)
    if(res.code == 200){
      loadSteps();
      ElMessage({
        type:"success",
        message:"删除成功"
      });
    }
  })
}
function editStepSubmit(){
// editStep.value = stepDetail.value;
processStepRequest.editStep(editStep.value,beforeStepId.value,res=>{
  console.log(res);
})
  stepEditWinDialogVisible.value = false;
}
function cancleEditStep(){
  stepEditWinDialogVisible.value = false;
}
function addStepSubmit(){
  console.log(newStep.value);
  if(newStep.value.processStepId == null){
    alert("请输入步骤编码！");
  }else if(newStep.value.processStepId < 1){
    alert("步骤编码必须大于0！");
  }else {
    processStepRequest.addStep(newStep.value,res=>{
      console.log(res);
      if(res.code == 200){
        loadProcesses();
        ElMessage({
          type:"success",
          message:"添加成功"
        });
      }else if (res.code == 300){
        loadProcesses();
        ElMessage({
          type:"success",
          message:"添加失败"
        });
      }
      loadSteps(editProcess.value.processId);
    })
    stepAddWinDialogVisible.value = false;
    newStep.value = {};
  }
}
function showDetails(process){
  processDatails.value = process;
  loadSteps(process.processId);
  processDatailsWinDialogVisible.value = true;
}
function loadSteps(processId){
  console.log(123)
  processStepRequest.showSteps(processId,stepPageNum.value,10,res=>{
    console.log("---------123123-----")
    console.log(res.data);
    processStep.value = res.data.list;
    stepTotal.value = res.data.total;
  });
}
// let stepPageNum = ref(1);
function stepChangePage(value) {
  stepPageNum.value = value;
  loadSteps(editProcess.value.processId);
}
function clearAll(){
  processQuery.value = {};
  loadProcesses();
}
let processesTable = ref(null);
function reDelete(){
  let selectedRows = processesTable.value.getSelectionRows();
  if(selectedRows.length == 0){
    ElMessage({
      type:"warning",
      message:"你没有选中任何数据"
    });
    return;
  }
  ElMessageBox.confirm(
      '您确定要将选中的项目删除吗？',
      '提示',
      {
        confirmButtonText:'是的',
        cancelButtonText:'点错了',
        type:'warning',
      }
  ).then(()=>{
    let processIds = [];
    selectedRows.forEach(row=>{
      processIds.push(row.processId);
    });
    processRequest.reDelete(processIds,res=>{
      console.log(res);
      if(res.code == 200){
        loadProcesses();
        ElMessage({
          type:"success",
          message:"删除成功"
        });
        loadProcesses();
      }
    })
  }).catch(()=>{})
}
function toEditProcess(currentProcess){
processRequest.showByProcessId(currentProcess.processId,res=>{
  console.log(res.data)
  editProcess.value = res.data;
})
  console.log(editProcess.value.processId);
processStepRequest.showSteps(currentProcess.processId,stepPageNum.value,10,res=>{
  console.log("--------------")
  console.log(res.data);
  processStep.value = res.data.list;
  stepTotal.value = res.data.total;
});
  processEditWinDialogVisible.value = true;
}
function cancleEdit(){
  processEditWinDialogVisible.value = false;
}
function editProcessSubmit(){
  processRequest.editProcess(editProcess.value,res=>{
    console.log(res);
    if(res.code == 1){
      loadProcesses();
      ElMessage({
        type:"success",
        message:"编辑成功"
      });
    }
    loadProcesses();
    processEditWinDialogVisible.value = false;
  })
}
function deleteProcessById(processId){
processRequest.deleteProcess(processId,res=>{
  console.log(res)
  if(res.code == 1){
    loadProcesses();
    ElMessage({
      type:"success",
      message:"删除成功"
    });
  }
})
}
function addProcess(){
  processAddWinDialogVisible.value = true;
}
function clearNewProcess(){
  newProcess.value = {};
}
function cancleAdd(){
  processAddWinDialogVisible.value = false;
  newProcess.value = {};
}
function addProcessSubmit(){
  console.log(newProcess.value);
  if(newProcess.value.processId == null){
    alert("请输入工序编码！");
  }else if(newProcess.value.processName == null){
    alert("请输入工序名称！");
  }else if(newProcess.value.processStatus == 0 || newProcess.value.processStatus == null){
    alert("请选择工序启用状态！");
  }else {
    processRequest.addProcess(newProcess.value,res=>{
      console.log(res);
      if(res.code == 200){
        loadProcesses();
        ElMessage({
          type:"success",
          message:"保存成功"
        });
      }
    });
    processAddWinDialogVisible.value = false;
    newProcess.value = {};
    newProcess.value.processStatus = 1;
  }
}
//分页
function changePage(value) {
  pageNum.value = value;
  loadProcesses();
}
function loadProcesses(){
  processRequest.loadProcesses(processQuery.value,pageNum.value,10,res=>{
    console.log(res);
    processes.value = res.data.list;
    total.value = res.data.total;
  })
}
onMounted(()=>{
  loadProcesses();
  changePage();
})
</script>